<!--
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the Source EULA. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
-->

<div class="fullsize vertBox" style="position: relative">
	<div #resultsPane *ngIf="dataSets.length > 0" id="resultspane" class="boxRow resultsMessageHeader resultsViewCollapsible" [class.collapsed]="!resultActive" (click)="togglePane('results')">
		<span> {{LocalizedConstants.resultPaneLabel}} </span>
		<span class="queryResultsShortCut"> {{resultShortcut}} </span>
	</div>
	<div id="results" *ngIf="renderedDataSets.length > 0" class="results vertBox scrollable"
		 (onScroll)="onScroll($event)" [scrollEnabled]="scrollEnabled" [class.hidden]="!resultActive"
		 (focusin)="onGridFocus()" (focusout)="onGridFocusout()">
		<div class="boxRow content horzBox slickgrid" *ngFor="let dataSet of renderedDataSets; let i = index"
			[style.max-height]="dataSet.maxHeight" [style.min-height]="dataSet.minHeight">
			<slick-grid #slickgrid id="slickgrid_{{i}}" [columnDefinitions]="dataSet.columnDefinitions"
						[ngClass]="i === activeGrid ? 'active' : ''"
						[dataRows]="dataSet.dataRows"
						(contextMenu)="openContextMenu($event, dataSet.batchId, dataSet.resultId, i)"
						enableAsyncPostRender="true"
						showDataTypeIcon="false"
						showHeader="true"
						[resized]="dataSet.resized"
						(mousedown)="navigateToGrid(i)"
						[selectionModel]="selectionModel"
						[plugins]="slickgridPlugins"
						class="boxCol content vertBox slickgrid">
			</slick-grid>
			<span class="boxCol content vertBox">
				<div class="boxRow content maxHeight" *ngFor="let icon of dataIcons">
					<div *ngIf="icon.showCondition()" class="gridIconContainer">
						<a class="gridIcon" style="cursor: pointer;"
						(click)="icon.functionality(dataSet.batchId, dataSet.resultId, i)"
						[title]="icon.hoverText()" [ngClass]="icon.icon()">
						</a>
					</div>
				</div>
			</span>
		</div>
	</div>
	<div id="messagepane" class="boxRow resultsMessageHeader resultsViewCollapsible" [class.collapsed]="!messageActive && dataSets.length !== 0" (click)="togglePane('messages')" style="position: relative">
		<div id="messageResizeHandle" [class.hidden]="!_resultsPane || !_messageActive || !resultActive" class="resizableHandle"></div>
		<span> {{LocalizedConstants.messagePaneLabel}} </span>
		<span class="queryResultsShortCut"> {{messageShortcut}} </span>
	</div>
	<div id="messages" class="scrollable messages" [class.hidden]="!messageActive && dataSets.length !== 0"
		(contextmenu)="openMessagesContextMenu($event)" (focusin)="onMessagesFocus()" (focusout)="onMessagesFocusout()"
		tabindex=0>
		<div class="messagesTopSpacing"></div>
		<table id="messageTable" class="resultsMessageTable">
			<colgroup>
				<col span="1" class="wideResultsMessage">
			</colgroup>
			<tbody>
				<ng-template ngFor let-message [ngForOf]="messages">
					<tr class='messageRow'>
						<td><span *ngIf="message.link">[{{message.time}}]</span></td>
						<td class="resultsMessageValue" [class.errorMessage]="message.isError" [class.batchMessage]="!message.link">{{message.message}} <a class="queryLink" *ngIf="message.link" (click)="onSelectionLinkClicked(message.batchId)">{{message.link.text}}</a>
						</td>
					</tr>
				</ng-template>
				<tr id='executionSpinner' *ngIf="!complete">
					<td><span *ngIf="messages.length === 0">[{{startString}}]</span></td>
					<td>
						<img class="icon in-progress" height="18px" />
						<span style="vertical-align: bottom">{{LocalizedConstants.executeQueryLabel}}</span>
					</td>
				</tr>
				<tr *ngIf="complete">
					<td></td>
					<td>{{stringsFormat(LocalizedConstants.elapsedTimeLabel, totalElapsedTimeSpan)}}</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div id="resizeHandle" [class.hidden]="!resizing" [style.top]="resizeHandleTop"></div>
</div>